<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客服抢单</title>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>
<form>
    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="输入客户">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="title" id="title" autocomplete="off" placeholder="请输入主题">
        </div>
        <button class="layui-btn" data-type="reload" type="button">搜索</button>
    </div>
    <table id="order-from" lay-filter="test"></table>
</form>
<script src="${pageContext.request.contextPath}/static/js/jquery3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

    });
</script>
<%--表单右侧工具栏--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="take">抢单</a>
</script>
<script>
    layui.use('table', function(){
        let table = layui.table;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#order-from'
            ,url: '${pageContext.request.contextPath}/order/getOrders.handler?isAllot=0&isFinish=0' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号', width:"20%", sort: true,templet:function (d) {
                        return d.id;
                    }},
                {field: 'createTime', title: '创建时间', width:"20%",sort:true,templet:function (d) {
                        return dateFormat("YY-mm--dd",new Date(d.createTime));
                    }},
                {field: 'title', title: '主题', width:"30%",templet:function (d) {
                        return d.title;
                    } },
                {field: 'userName', title: '用户名', width:"20%",templet:function (d) {
                        return d.user.nickName;
                    }},
                {fixed: 'right',title:'操作', width:"10%", align:'center', toolbar: '#barDemo'}
            ]],
            id: "user-form"
        });

        //顶部筛选监听
        var $ = layui.$, active = {
            reload: function(){
                let userName = $("#userName");
                let title = $("#title");
                //执行重载
                table.reload('user-form', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        userName:userName.val()==""?null:userName.val(),
                        title:title.val()==""?null:title.val(),
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'take'){
                let staffId = ${staffInfo.id}; //客服id
                let id = data.id; //文件id
                let userName = data.user.nickName; //用户
                layer.confirm('真的要接收'+userName+'的答复吗', function(index){
                    $.ajax({
                        type: "post",
                        url: "${pageContext.request.contextPath}/staff/takeOrder.handler",
                        data:{
                            id:id,
                            staffId:staffId,
                            isAllot:1
                        },
                        success:function (date) {
                            console.log(typeof date);
                            if(date.state){
                                obj.del();
                                //执行重载
                                table.reload('user-form', {
                                    where: {
                                        userName:$("#userName").val()==""?null:$("#userName").val(),
                                        title:$("#title").val()==""?null:$("#title").val(),
                                    }
                                }, 'data');
                                layer.close(index);
                            }else {
                                layer.msg('抢单失败！！！该单已被接收或网络波动,请刷新尝试！！！', {icon: 2});
                            }
                        }
                    });
                });
            }
        });
    });
</script>
</body>
<%--时间格式转换--%>
<script>
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }
</script>
</html>
